<template>
	<view class="content padding">
		<view class="coupon bg-img flex flex-direction ">
			<view class="flex align-center " style="height: 240rpx;">
				<image
					:src="couponInfo.image"
					mode="aspectFill"
					class="radius bg-gradual-blue margin-left"
					style="width: 160rpx; height: 160rpx;"
				></image>
				<view class="flex flex-direction margin-left">
					<text class="text-df">{{ couponInfo.name }}</text>
					<text class="text-price text-bold" style="color: #F8CE39; font-size: 70rpx;">{{ couponInfo.price }}</text>
				</view>
			</view>
			<view class="flex align-center padding-left">
				<text style="color: #666666;">{{ couponInfo.usage_time }}</text>
			</view>
		</view>
		<view class="jieshao">
			<view class="titless">购买须知</view>
			<view>
				<view class="sss">
					<view class="titi-two">使用时间</view>
					<view class="riqi">{{ couponInfo.usage_time }}</view>
				</view>
				<view class="sss">
					<view class="titi-two">适用范围</view>
					<view class="riqi">{{ couponInfo.scope_application }}</view>
				</view>
				<view class="sss">
					<view class="titi-two">使用规则</view>
					<view class="riqi">{{ couponInfo.rules_use }}</view>
				</view>
			</view>
		</view>
		<button class="cu-btn determine" @click="buyCoupon()" v-if="0">购买优惠券包</button>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			couponInfo: {},
			id: null,
		};
	},
	onShow() {},
	onLoad(options) {
		this.id = options.couponId;
		var that = this;
		app.globalData.api.getCouponDetail(options.couponId).then(res => {
			that.couponInfo = res.resultObj;
		});
	},
	methods: {
		buyCoupon() {
			/* 
			app.globalData.api.addUserCoupon({userId:app.globalData.smmUser.id,couponId:this.couponInfo.id}).then(res=>{
				if(res.message == '操作成功!'){
					uni.showModal({
						title:'购买成功'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '../user-center/coupon',
						});
					}, 1000);
				}
			});
		 */

			var that = this;
			app.globalData.api.wxPay(this.couponInfo.price).then(res => {
				wx.requestPayment({
					timeStamp: res.resultObj.wxPayRequest.timeStamp,
					nonceStr: res.resultObj.wxPayRequest.nonceStr,
					package: res.resultObj.wxPayRequest.packageValue,
					signType: 'MD5',
					paySign: res.resultObj.wxPayRequest.paySign,
					success(res1) {
						console.log('res1 :>> ', res1);
						that.$refs.uToast.show({ title: '购买优惠券包成功~~', type: 'success' });
						setTimeout(() => {
							uni.navigateTo({
								url: '../user-center/coupon',
							});
						}, 1000);
					},
					fail(res2) {
						console.log('failed', res2);
					},
				});
			});
		},
		jump(url) {
			uni.navigateTo({
				url,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.coupon {
		position: relative;
		width: 690rpx;
		height: 290rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/coupon.png);
		.immediately {
			position: absolute;
			top: 0;
			right: 0;
			//transform: translateY(-50%);
			width: 125rpx;
			height: 240rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
}

.jieshao {
	width: 690rpx;
	margin: 20rpx auto;
	height: 500rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 25rpx;
	line-height: 50rpx;

	.titless {
		font-size: 32rpx;
		font-weight: 600;
	}
	.sss {
		margin: 25rpx 0;

		.titi-two {
			font-weight: 600;
		}
		.riqi {
			font-size: 24rpx;
			color: #a6a6a6;
		}
	}
}
.determine {
	width: 690rpx;
	height: 80rpx;
	background: #f8ce39;
	border-radius: 12rpx;

	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 80rpx;
	margin: 60rpx 0;
}
</style>
